import React, {useState, useEffect, useImperativeHandle, forwardRef, useRef} from 'react';
import './leftMenu.scss';
import {Menu} from 'antd';
import Icon from '@/plugins/Icon/index';
import MenuItemRule from "./MenuItemRule";
import LogoImg from "@/assets/logo-white.png";
import {useNavigate} from "react-router-dom";

interface PropsRule {
    menuData: Array<MenuItemRule>,
}

const {SubMenu} = Menu;
const LeftMenu = forwardRef((props: PropsRule, ref) => {
    const navigate = useNavigate();
    const menuData = props.menuData;
    const [state, setState] = useState({
        openeds: ['1'],
    });

    function checkItem(url) {
        console.log('url', url)
        navigate(url);
    }

    function MenuRender(navMenu, index) {
        if (navMenu.children && navMenu.children.length > 0) {
            return (
                <SubMenu icon={<Icon name={navMenu.menuIco}/>} key={navMenu.menuId} title={navMenu.menuName}>
                    {
                        navMenu.children.map((item, index) => MenuRender(item, index))
                    }
                </SubMenu>
            );
        } else {
            return (
                <Menu.Item key={navMenu.menuId} icon={<Icon name={navMenu.menuIco}/>}
                           onClick={() => checkItem(navMenu.menuUrl)}>
                    {navMenu.menuName}
                </Menu.Item>
            );
        }
    }

    const thizRef = useRef();

    useImperativeHandle(ref, () => ({
        handleClick
    }), [thizRef]);

    const handleClick = () => {
        console.log('子组件的按钮被点击了')
    };
    return (
        <div className='navMenu' ref={thizRef}>
            <div className='content'>
                <p className='logo'>
                    <img src={LogoImg} alt=""/>
                    统一中心
                </p>
                <Menu theme="dark" className='leftMenu' mode="inline" defaultOpenKeys={state.openeds}>
                    {
                        menuData.map((navMenu, index: number) => {
                            return MenuRender(navMenu, index);
                        })
                    }
                </Menu>
            </div>
        </div>
    );
});

export default LeftMenu;
